<template>
    <!-- 登录框容器 -->
    <div class="login-wrap">
    <!-- el-form 表单 -->
    <el-form
    label-position="left"
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="0px"
    class="demo-ruleForm login-container"
    >
    <!-- 标题 -->

    <h3 class="title">用户登录</h3>
    <!-- 账号输入框 -->
    <el-form-item prop="phone">
    <el-input
    type="text"
    v-model="ruleForm.phone"
    auto-complete="off"
    placeholder="账号"
    ></el-input>
    </el-form-item>
    <!-- 密码输入框 -->
    <el-form-item prop="password">
    <el-input
    type="password"
    v-model="ruleForm.password"
    auto-complete="off"
    placeholder="密码"
    ></el-input>
    </el-form-item>
    <!-- 按钮 -->
    <el-form-item style="width: 100%">
    <el-button
    type="primary"
style="width: 100%"
@click="submitForm('ruleForm')"
>登录
    </el-button>
    </el-form-item>
    </el-form>
    </div>
    </template>

<style scoped>
.cs{
    text-align: center;
    margin-bottom: 200px;
}
.login-wrap {
  display: flex; /* 修正为flex */  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中 */
box-sizing: border-box;
position: absolute; /* 或者relative，取决于你的布局需求 */  
  top: 50%; /* 与left: 50%配合实现绝对定位居中 */  
  left: 50%;  
  transform: translate(-50%, -50%);
  width: 70vh;
  height: 100vh;
padding-top: 30%;
/* 将素材中的`login-bg.svg`背景图拷贝至`/src/assets/images`目录，用作页面背景图 */
background-image: url('@/assets/images/2.jpg');
background-repeat: no-repeat;
background-position: center left;
background-size: 100%;
}
.login-container {
    opacity: 0.85; 
  transform: translate(-1%, -75%);
  border-radius: 20px;  
  margin: 0px auto; /* 这将在水平方向上自动调整margin以居中块级元素 */  
  width: 350px;  
  padding: 30px 35px 15px 35px;  
  background: #fff;  
  border: 1px solid #eaeaea;  
  text-align: left;  
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);  
}
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #442;
}
</style>

<script>
import {login} from '@/api/user'
export default {
name: "login",
data() {
return {
ruleForm: {
//phone和password默认为空
phone: "",
password: "",
},
//ElementUI rules前端验证
rules: {
// 对账号进行验证
phone: [
{ required: true, message: "请输入账号", trigger: "blur" },
{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger:
'blur' }
],
// 对密码进行验证
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger:
'blur' }
],
},
};
},
methods: {
submitForm(formName) {
// 通过this.$refs获取表单引用并调用validate方法进行表单验证
this.$refs[formName].validate(async (valid) => {
// 如果表单验证通过
if (valid) {
// 发送登录请求，传递表单数据this.ruleForm，等待响应
let res = await login(this.ruleForm)
// 如果响应表示登录成功
if (res.success) {
// 获取用户数据
const User = res.entity
// 将用户数据和token存储在本地存储中
localStorage.setItem('user', JSON.stringify(User))
localStorage.setItem('token', User.token)
// 从本地存储中获取token
const token = localStorage.getItem('token')
// 如果token存在
if (token) {
// 跳转到主页面
this.$router.push({ path: '/' })
// 显示登录成功的消息提示
this.$message.success('登录成功')
}
}
} else {
// 如果表单验证未通过，返回false
return false
}
})
}
}
};

</script>